<template>
	<div>
		<div v-if="currenPage == 'search'">
			<div class="query_part">
			<div class="input_search_part">
				<div class="select_part" ref="selectRef" @click="openOption">{{ selectValul }} ></div>
				<input class="input_part" ref="inputRef"
                v-model="keyWord" @focus="openHistory" placeholder="请输入你想要的内容" type="text" name="" id="" />
				<div class="serach_btn" @click="toSearch">搜索</div>
			</div>
			<!-- <el-button>条件中查询</el-button> -->
		</div>
		<div class="history_page_btn">
			<!-- <el-button @click="openHistoryPage">搜索历史</el-button> -->
		</div>
		
        <!-- 各个组件 -->
        <div v-for="(item, index) in tabs" :key="index">
			<component
				ref="crud1"
				v-if="activeName == item.label"
				:is="mapping[item.value]"
				:ifShowSearch="props.ifShowSearch"
				:openMore="openMore"
                :isComprehensiveQueries = "true"
				:keyWord="keyWord"
				:businessType="item.businessType"
			></component>
            
		</div>
		<!-- 搜索历史弹窗 -->
		<!-- <el-popover
			popper-style="width:1056px;margin-left:-40px;padding:22px;box-sizing: border-box;"
			ref="historyPopoverRef"
			placement="bottom"
			:virtual-ref="inputRef"
			trigger="focus"
			virtual-triggering
			:show-arrow="false"
		>
			<div>
				<div v-for="(item, index) in historyList" :key="index">
					<div class="history_title">{{ item.date }}</div>
					<div v-for="(el, ind) in item.list" :key="ind" class="history_option">{{ el.option }}/{{ el.value }}</div>
				</div>
			</div>
		</el-popover> -->
		<!-- 选择的对象 -->
		<el-popover
			ref="optionPopoverRef"
			popper-style="width:944px;margin-left:-50px;padding:22px;box-sizing: border-box;"
			placement="bottom-start"
			:virtual-ref="selectRef"
			trigger="click"
			virtual-triggering
			:show-arrow="false"
		>
			<div>
				<div v-for="(item, index) in selectOptionList" :key="index">
					<div class="head_part">{{ item.head }}</div>
					<div v-for="(optionItem,ind) in item.option" :key="ind">
						<div class="title_part" >{{optionItem.title }}</div>
						<div>
							<span
								v-for="el in optionItem.list"
								:class="el.active ? 'actvie_label_part' : 'label_part'"
								:key="el.value"
								@click="changeSelect(el)"
								>{{ el.label }}</span
							>
						</div>
					</div>
				</div>
			</div>
		</el-popover>
		</div>
		<div v-if="currenPage == 'history'">
			<!-- 搜索历史页面 -->
			<History @back="toBack"></History>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, unref, ref } from 'vue'
import History from '../history/index.vue'
import { useCommonStore } from '@/stores/common'
let {setGloablParams} = useCommonStore()
// 基础数据
import ServiceProvider from '@/views/datacenter/basicData/ServiceProvider/index.vue'
import oldman from '@/views/datacenter/basicData/oldman/index.vue'
import serviceFacility from '@/views/datacenter/basicData/serviceFacility/index.vue'

import serviceOrg from '@/views/datacenter/basicData/serviceOrg/index.vue'
import practitioner from '@/views/datacenter/basicData/practitioner/index.vue'
import volunteer from '@/views/datacenter/basicData/volunteer/index.vue'
import experts from '@/views/datacenter/basicData/experts/index.vue'

import serviceOrgHome from '@/views/datacenter/basicData/serviceOrgHome/index.vue'
// 档案数据
// import familyBedConstruct from '@/views/datacenter/business/familyBedConstruct/index.vue'
// import reformArchives from '@/views/datacenter/business/reformArchives/index.vue'
// import elderlyInstitutionsRating from '@/views/datacenter/business/elderlyInstitutionsRating/index.vue'
// import elderlyFacilitiesRating from '@/views/datacenter/business/elderlyFacilitiesRating/index.vue'
// import healthArchives from '@/views/datacenter/business/healthArchives/index.vue'
// import elderlyAssessment from '@/views/datacenter/business/elderlyAssessment/index.vue'
// // 社区居家服务工单数据
// import serviceOrder from '@/views/datacenter/business/serviceOrder/index.vue'
// // 养老机构服务和管理数据
// import HospitalRecord from '@/views/datacenter/business/insteServer/HospitalRecord/index.vue'
// import CheckoutRecord from '@/views/datacenter/business/insteServer/CheckoutRecord/index.vue'
// import oldmanClockRecord from '@/views/datacenter/business/insteServer/ClockRecord/index.vue'
// import NursingRecord from '@/views/datacenter/business/insteServer/NursingRecord/index.vue'
// import ReceiveRcord from '@/views/datacenter/business/insteServer/ReceiveRcord/index.vue'
// import PaymentRecord from '@/views/datacenter/business/insteServer/PaymentRecord/index.vue'
// import PatrolRcord from '@/views/datacenter/business/insteServer/PatrolRcord/index.vue'
// import FoodSamples from '@/views/datacenter/business/insteServer/FoodSamples/index.vue'
// import EquipWarn from '@/views/datacenter/business/insteServer/EquipWarn/index.vue'
// // 补贴资金数据
// import HonorOldGold from '@/views/datacenter/business/subsidyFunds/HonorOldGold/index.vue'
// import BedConstructionSubsidies from '@/views/datacenter/business/subsidyFunds/BedConstructionSubsidies/index.vue'
// import InstitutionOperationSubsidies from '@/views/datacenter/business/subsidyFunds/InstitutionOperationSubsidies/index.vue'
// import MedicalInstitutionalSubsidies from '@/views/datacenter/business/subsidyFunds/MedicalInstitutionalSubsidies/index.vue'
// import PractitionerPersonnelSubsidies from '@/views/datacenter/business/subsidyFunds/PractitionerPersonnelSubsidies/index.vue'
// import FiveCategoriesOldSubsidies from '@/views/datacenter/business/subsidyFunds/FiveCategoriesOldSubsidies/index.vue'
// import HomeBedSubsidy from '@/views/datacenter/business/subsidyFunds/HomeBedSubsidy/index.vue'
// import LevelUpSubsidies from '@/views/datacenter/business/subsidyFunds/LevelUpSubsidies/index.vue'
// // 政务数据
// import PensionInformation from '@/views/datacenter/business/policyData/PensionInformation/index.vue'
// import PolicyDocuments from '@/views/datacenter/business/policyData/PolicyDocuments/index.vue'

type Props = {
	ifShowSearch?: any
}

const props = withDefaults(defineProps<Props>(), {
	ifShowSearch: true,
})
let mapping = ref({
	'ServiceProvider':ServiceProvider,
    'oldman':oldman,
    'serviceFacility':serviceFacility,
	'serviceOrg':serviceOrg,
	'practitioner':practitioner,
	'volunteer':volunteer,
	'experts':experts,
	
	'serviceOrgHome':serviceOrgHome,
	// 
	// 'familyBedConstruct':familyBedConstruct,
	// 'reformArchives':reformArchives,
	// 'elderlyInstitutionsRating':elderlyInstitutionsRating,
	// 'elderlyFacilitiesRating':elderlyFacilitiesRating,
	// 'healthArchives':healthArchives,
	// 'elderlyAssessment':elderlyAssessment,
	// // 
	// 'serviceOrder':serviceOrder,
	// // 
	// 'HospitalRecord':HospitalRecord,
	// 'CheckoutRecord':CheckoutRecord,
	// 'oldmanClockRecord':oldmanClockRecord,
	// 'NursingRecord':NursingRecord,
	// 'ReceiveRcord':ReceiveRcord,
	// 'PaymentRecord':PaymentRecord,
	// 'PatrolRcord':PatrolRcord,
	// 'FoodSamples':FoodSamples,
	// 'EquipWarn':EquipWarn,
	// // 
	// 'HonorOldGold':HonorOldGold,
	// 'BedConstructionSubsidies':BedConstructionSubsidies,
	// 'InstitutionOperationSubsidies':InstitutionOperationSubsidies,
	// 'MedicalInstitutionalSubsidies':MedicalInstitutionalSubsidies,
	// 'PractitionerPersonnelSubsidies':PractitionerPersonnelSubsidies,
	// 'FiveCategoriesOldSubsidies':FiveCategoriesOldSubsidies,
	// 'HomeBedSubsidy':HomeBedSubsidy,
	// 'LevelUpSubsidies':LevelUpSubsidies,
	// // 
	// 'PensionInformation':PensionInformation,
	// 'PolicyDocuments':PolicyDocuments
})
let activeName = ref('服务对象')
let keyWord = ref('')
let crud1 = ref()
let openMore = ref(false)
// 聚合搜索
let inputRef = ref()
let historyPopoverRef = ref()
let selectRef = ref()
let optionPopoverRef = ref()

let selectOptionList = ref([
	{
		head: '基础数据',
		option: [{
			title: '',
			list: [
				{ label: '服务对象', value: 'oldman', active: true },
				{ label: '从业人员', value: 'practitioner', active: false },
				{ label: '养老机构', value: 'serviceOrg', active: false },
				{ label: '养老服务运营单位', value: 'serviceOrgHome', active: false },
				{ label: '服务商', value: 'ServiceProvider', active: false },
				{ label: '志愿者', value: 'volunteer', active: false },
				{ label: '养老设施', value: 'serviceFacility', active: false },
				{ label: '养老专家', value: 'experts', active: false },
			],
		},
	]
	},
	// {
	// 	head: '业务数据',
	// 	option:[{
	// 		title: '档案数据',
	// 		list: [
	// 			{ label: '家床建设档案', value: 'familyBedConstruct', active: false },
	// 			{ label: '适老化档案', value: 'reformArchives', active: false },
	// 			{ label: '养老机构评定档案', value: 'elderlyInstitutionsRating', active: false },
	// 			{ label: '社区居家服务组织评定档案', value: 'elderlyFacilitiesRating', active: false },
	// 			{ label: '健康档案', value: 'healthArchives', active: false },
	// 			{ label: '老年人能力评估档案', value: 'elderlyAssessment', active: false },
	// 		],
	// 	},
	// 	{
	// 		title: '社区居家服务工单数据',
	// 		list:[
	// 			{label:'政府购买服务',value:'serviceOrder',active: false,businessType:'1'},
	// 			{label:'家庭养老床位服务',value:'serviceOrder',active: false,businessType:'2'},
	// 			{label:'养老服务时间银行',value:'serviceOrder',active: false,businessType:'3'},
	// 			{label:'服务站点服务',value:'serviceOrder',active: false,businessType:'5'},
	// 			{label:'紧急呼叫服务',value:'serviceOrder',active: false,businessType:'4'},
	// 			{label:'助餐服务',value:'serviceOrder',active: false,businessType:'8'},
	// 			{label:'居家上门服务',value:'serviceOrder',active: false,businessType:'6'},
	// 			{label:'银发顾问服务',value:'serviceOrder',active: false,businessType:'7'},
	// 		]
	// 	},
	// 	{
	// 		title: '养老机构服务和管理数据',
	// 		list:[
	// 			// {label:'房间信息',value:'',active: false},
	// 			{label:'老人入院记录',value:'HospitalRecord',active: false},
	// 			{label:'老人退院记录',value:'CheckoutRecord',active: false},
	// 			{label:'老人打卡记录',value:'oldmanClockRecord',active: false},
	// 			{label:'护理服务记录',value:'NursingRecord',active: false},
	// 			{label:'老人每月应收账单',value:'ReceiveRcord',active: false},
	// 			{label:'老人每月缴费记录',value:'PaymentRecord',active: false},
	// 			// {label:'老人离院记录',value:'12',active: false},
	// 			{label:'消防监管数据',value:'PatrolRcord',active: false},
	// 			// {label:'隐患评估数据',value:'12',active: false},
	// 			// {label:'疫情防控数据',value:'12',active: false},
	// 			{label:'食品留样数据',value:'FoodSamples',active: false},
	// 			{label:'设备报警处理数据',value:'EquipWarn',active: false},
	// 		]
	// 	},
	// 	{
	// 		title:'补贴资金数据',
	// 		list:[
	// 			{label:'尊老金',value:'HonorOldGold',active: false},
	// 			{label:'机构床位建设补贴',value:'BedConstructionSubsidies',active: false},
	// 			{label:'机构运营补贴',value:'InstitutionOperationSubsidies',active: false},
	// 			{label:'医疗机构补贴',value:'MedicalInstitutionalSubsidies',active: false},
	// 			{label:'从业人员补贴',value:'PractitionerPersonnelSubsidies',active: false},
	// 			{label:'五类老人入住机构补贴',value:'FiveCategoriesOldSubsidies',active: false},
	// 			{label:'家庭床位建设补贴',value:'HomeBedSubsidy',active: false},
	// 			{label:'等级提升补贴',value:'LevelUpSubsidies',active: false},
	// 		]
	// 	},
	// 	{
	// 		title:"政务数据",
	// 		list:[
	// 			{label:'养老资讯数据',value:'PensionInformation',active: false},
	// 			{label:'政策文件数据',value:'PolicyDocuments',active: false}
	// 		]
	// 	}
	// ]
	// },
])
let tabs = computed(() => {
    let list = []
    selectOptionList.value.forEach(el=>{
		el.option.forEach(item=>{
			list = [...list,...item.list]
		})
    })
  return list
})
// 去搜索
const toSearch = () =>{
	keyWord.value = keyWord.value
	setGloablParams({keyWord:keyWord.value})
	crud1.value[0].handleRefresh()
}
let historyList = ref([
	{
		date: '今天 · 2023年9月4日 星期一',
		list: [
			{ option: '服务对象', value: '张' },
			{ option: '服务对象', value: '张' },
			{ option: '服务对象', value: '张' },
		],
	},
	{
		date: '今天 · 2023年9月4日 星期一',
		list: [
			{ option: '服务对象', value: '张' },
			{ option: '服务对象', value: '张' },
			{ option: '服务对象', value: '张' },
		],
	},
])
const openHistory = () => {
	// unref(historyPopoverRef).inputRef?.delayHide?.()
}
const openOption = () => {
	unref(optionPopoverRef).selectRef?.delayHide?.()
}
// 切换选择的数据
let selectValul = ref('服务对象')
let businessType = ref(undefined)
const changeSelect = (el) => {
	selectValul.value = el.label
	if(el.businessType) {
		businessType.value = el.businessType
	}else{
		businessType.value = undefined
	}
	selectOptionList.value.forEach((el1) => {
		el1.option.forEach(item=>{
			item.list.forEach(data=>{
				data.active = false
			})
		})
	})
	el.active = true
    activeName.value = el.label
	// 清除搜索框里的东西
	keyWord.value = undefined
	// 清空全局变量
	setGloablParams({})
}
let currenPage = ref('search')
const openHistoryPage = () => {
	currenPage.value = 'history'
}
const toBack = () =>{
	currenPage.value = 'search'
}
onMounted(() => {})
</script>

<style scoped>
.query_part {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.input_search_part {
	/* margin: 0px auto; */
	width: 1056px;
	max-width: 1056px;
	height: 48px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #0052d9;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-left: 48px;
	box-sizing: border-box;
	margin-right: 20px;
}
.select_part {
	width: 150px;
	height: 48px;
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	line-height: 48px;
}
.head_part {
	width: 100%;
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	text-align: left;
	color: #0052d9;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 0.5px solid #dcdcdc;
}
.title_part {
	margin: 10px 0;
	color: #000000e6;
	/* color: #0052d9; */
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
}
.label_part {
	margin-bottom: 15px;
	display: inline-block;
	margin-right: 20px;
	color: #000000e6;
	/* color: #0052d9; */
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	cursor: pointer;
}
.actvie_label_part {
	margin-bottom: 15px;
	display: inline-block;
	margin-right: 20px;
	color: #0052d9;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	cursor: pointer;
}
.history_content {
	width: 1056px !important;
	/* max-width: 1056px; */
	height: 200px;
	background-color: #0052d9;
}
.input_part {
	height: 48px;
	width: calc(100% - 274px);
	border-top: 1px solid #0052d9;
	border-bottom: 1px solid #0052d9;
	border-left: none;
	border-right: none;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	line-height: 48px;
}
.input_part:focus {
	outline: none;
}
.serach_btn {
	width: 124px;
	height: 48px;
	border-radius: 0 8px 8px 0;
	background: #0052d9;
	line-height: 48px;
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.2px;
	color: #fff;
	cursor: pointer;
}
.history_title {
	font-weight: 700;
	font-size: 20px;
	text-align: left;
	color: #1c1c28;
	margin-bottom: 22px;
}
.history_option {
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-weight: 400;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	margin-bottom: 11px;
	padding-left: 20px;
	box-sizing: border-box;
	cursor: pointer;
	overflow: hidden;
}
.history_option:hover {
	background-color: #e7e7e747;
	border-radius: 4px;
}
.history_page_btn{
	margin-top: 20px;
	max-width: 1056px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
</style>
